import React, {useEffect, useState, useRef} from "react";


export default function Chart() {
  const canvas = useRef();

  function draw() {

    const ctx = canvas.current.getContext('2d');

    const area = canvas.current.getBoundingClientRect();
    const width = area.width;
    const height = area.height;

    const data = [
      {x: 0, y: 10},
      {x: 1, y: 20},
      {x: 2, y: 15},
      {x: 3, y: 25},
      {x: 4, y: 30},
      {x: 5, y: 25},
    ];

    const cor = [];

    const step = width / (data.length + 1);

    // ctx.fillRect(0, 0, width / 2, height / 2);

    ctx.beginPath();
    ctx.moveTo(width * 0.1, height * 0.9);
    cor.push(width * 0.1, height * 0.9);
    data.map((point, index) => {

      // cor.push([step * (index + 1), height * 0.9 - point.y])
      ctx.lineTo(step * (index + 1), height * 0.9 - point.y);
    })

    // for (let i = 0; i < data.length - 2; i++) {
    //   ctx.bezierCurveTo(cor[i].x, cor[i].y, cor[i + 1].x, cor[i + 1].y, cor[i + 2].x, cor[i + 2].y);
    // }

    ctx.strokeStyle = '#ff0000';
    ctx.stroke();
  }

  useEffect(() => {
    draw();
  }, [])

  return (
    <div>
      <canvas ref={canvas} id={'canvas'} width={500} height={400} style={{background: '#efefef'}}/>
    </div>
  )
}
